<!-- eslint-disable no-undef -->
<script setup>
  import { ref, nextTick, onUnmounted } from 'vue'
  import InitHkVideo from './utils'
  //声明公用变量
  let initWeb = null
  const cameraIndexCode = ref('')
  // const time = ref([])
  const idWidth = ref(0)
  const idHeight = ref(0)
  const loading = ref(true)
  const playWnd = ref(null)
  nextTick(() => {
    // console.log(playWnd.value.offsetWidth, $('#playWnd').width())
    // console.log(playWnd.value.offsetHeight, $('#playWnd').height())
    idWidth.value = playWnd.value.offsetWidth
    //视频窗口初始的固定高度,当前屏幕父元素的高度
    idHeight.value = playWnd.value.offsetHeight
    initWeb = new InitHkVideo(
      'playWnd',
      idWidth.value,
      idHeight.value,
      '26750497',
      '1P0J1vqSFw9EHQYnZovs',
      '192.168.5.250',
      443,
      () => {
        loading.value = false
      }
    )
    monitoringInit()
  })

  // 开始播放
  function startPlay() {
    initWeb.startVideoPreview(cameraIndexCode.value)
  }

  // function pickerFocus() {
  //   initWeb.oWebControl.JS_HideWnd()
  // }

  // function pickerBlur() {
  //   initWeb.oWebControl.JS_ShowWnd()
  // }

  function monitoringInit() {
    // 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
    window.addEventListener('resize', resizeChange)
    // 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
    window.addEventListener('scroll', scrollChange)
    // 监听标签关闭
    window.addEventListener('unload', unloadChange)
  }

  function resizeChange() {
    if (initWeb.oWebControl != null) {
      initWeb.oWebControl.JS_Resize(
        playWnd.value.offsetWidth,
        playWnd.value.offsetHeight
      )
    }
  }

  function scrollChange() {
    if (initWeb.oWebControl != null) {
      initWeb.oWebControl.JS_Resize(
        playWnd.value.offsetWidth,
        playWnd.value.offsetHeight
      )
    }
  }

  function unloadChange() {
    if (initWeb.oWebControl != null) {
      initWeb.oWebControl.JS_HideWnd() // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
      initWeb.oWebControl.JS_Disconnect().then(
        function () {
          // 断开与插件服务连接成功
        },
        function () {
          // 断开与插件服务连接失败
        }
      )
    }
  }

  onUnmounted(() => {
    window.removeEventListener('resize', resizeChange)
    window.removeEventListener('scroll', scrollChange)
    window.removeEventListener('unload', unloadChange)
    initWeb.clearTimer()
  })
</script>

<template>
  <div class="hk-viceo-page">
    <div class="left-area">
      <t-input
        v-model.trim="cameraIndexCode"
        placeholder="请输入监控点编号"
      ></t-input>
      <!-- <t-date-range-picker
        v-model="time"
        clearable
        format="YYYY-MM-DD"
        @focus="pickerFocus"
        @blur="pickerBlur"
      /> -->
      <t-button theme="primary" @click="startPlay">播放</t-button>
    </div>
    <div class="right-area">
      <div id="playWnd" ref="playWnd" v-loading="loading" class="playWnd"></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .hk-viceo-page {
    height: 100%;
    width: 100%;
    display: flex;
    padding: 12px;
    gap: 12px;
    .left-area {
      width: 300px;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .right-area {
      flex: 1;
      display: flex;
      .playWnd {
        flex: 1;
      }
    }
  }
</style>
